<template>
  <div class="schedule-table">
    <div class="header-picker">
      <el-select
        style="width:120px"
        size="mini"
        v-model="scYear.value"
        @change="scYearChange"
        placeholder
      >
        <el-option
          v-for="item in scYear.list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span style="font-size:25px">学年第</span>
      <el-select
        style="width:55px"
        size="mini"
        v-model="semester.value"
        @change="semesterChange"
        placeholder
      >
        <el-option
          v-for="item in semester.list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span style="font-size:25px">学期教师个人课程表</span>
    </div>
    <table>
      <thead>
        <tr>
          <th></th>
          <th
            v-for="(weekNum, weekIndex) in classTableData.courses.length"
            :key="weekIndex"
          >{{'周' + digital2Chinese(weekIndex, 'week')}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
          <td>
            <p>{{'第' + digital2Chinese(lessonIndex) + "节"}}</p>
            <!-- <p class="period">{{ lesson }}</p> -->
          </td>
          <td
            v-for="(course, courseIndex) in classTableData.courses"
            :key="courseIndex"
            v-if="jusdeShow(courseIndex,lessonIndex)"
            :rowspan="rrols(courseIndex,lessonIndex)"
          >
            <div
              class="schedule-tabel-item"
              v-for="(item,index) in classTableData.courses[courseIndex][lessonIndex].list"
              :key="index"
            >
              <p>
                <span v-text="item.name"></span>
              </p>
              <p>
                <span v-text="item.time"></span>
              </p>
              <!-- <p>
                <span v-text="item.teacher"></span>
              </p>-->
              <p>
                <span v-text="item.address"></span>
              </p>
            </div>
            <!-- <p>任课老师:{{classTableData.courses[courseIndex][lessonIndex]}}</p>
            <p>任课地点:</p>-->
          </td>
        </tr>
      </tbody>
    </table>
    <div style="display:none">{{falg}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      falg: false,
      classTableData: {
        lessons: [
          "第一节课",
          "第二节课",
          "第三节课",
          "第四节课",
          "第五节课",
          "第六节课",
          "第七节课",
          "第八节课",
          "第九节课",
          "第十节课",
          "第十一节课",
          "第十二节课"
        ],
        courses: [
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        ]
      },
      scYear: {
        value: "",
        list: []
      },
      semester: {
        value: "",
        list: []
      },
      weekIndexChangeObject: {
        周一: 0,
        周二: 1,
        周三: 2,
        周四: 3,
        周五: 4,
        周六: 5,
        周日: 6
      }
    };
  },
  methods: {
    scYearChange(e) {
      console.log(1);

      this.getSchedule();
    },
    semesterChange(e) {
      this.getSchedule();
    },
    digital2Chinese(num, identifier) {
      const character = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二"
      ];
      return identifier === "week" && num === 6 ? "日" : character[num];
    },
    jusdeShow(courseIndex, lessonIndex) {
      //判断如何显示的，逻辑复杂，不多说了
      if (lessonIndex == 0) {
        return true;
      }
      let beforeCoure = JSON.stringify(
        this.classTableData.courses[courseIndex][lessonIndex - 1]
      );
      let nowCoure = JSON.stringify(
        this.classTableData.courses[courseIndex][lessonIndex]
      );
      if (beforeCoure != nowCoure || nowCoure == "{}") {
        return true;
      }
      return false;
    },
    rrols(courseIndex, lessonIndex) {
      //判断占几格的
      let cols = this.classTableData.courses[courseIndex][lessonIndex].cols;
      return cols ? cols : "1";
    },

    courseListMap(courseList) {
      //如果一个课程有多个时间，那么就将时间拆分开来，然后一一对应合并成一个新的数组，并且返回
      let showCourseList = [];
      courseList.forEach(courseValue => {
        let timeList = courseValue.time.split(";");
        //其中的切割时用这个符号进行的切割
        timeList.forEach(timeValue => {
          showCourseList.push({
            name: courseValue.coursename,
            time: timeValue,
            address:courseValue.address,
          });
        });
      });
      return showCourseList;
    },
    courseToCourseShow(showCourseList) {
      //这个就是将展开来的课程，按照位置，一个个安放进课表绑定的数组中去
      showCourseList.forEach(value => {
        let week = value.time.slice(0, 2);
        let timeIndex = value.time.slice(2, 5);
        let weekIndex = this.weekIndexChangeObject[week]; //课表所绑定的二维数组中，这个课程在第一维第几个，即周几
        let indexList = timeIndex.split(","); //这个数组里面是哪儿几节课需要被添加，即二维数组中第二维的位置
        //上面的index是1,2而在数组中，对应的是0,1.所以要将值减去一，就是正确的二维数组第二维的值了
        let cols = indexList.length.toString();
        indexList.forEach(indexValue => {
          this.classTableData.courses[weekIndex][
            parseInt(indexValue) - 1
          ].cols = cols;
          // console.log( this.classTableData.courses[weekIndex][value]);
          if (
            !this.classTableData.courses[weekIndex][parseInt(indexValue) - 1]
              .list
          ) {
            //如果这个二维数组中的list不存在
            this.classTableData.courses[weekIndex][
              parseInt(indexValue) - 1
            ].list = [];
            //则我们创造一个list再往里面添加数据
            this.classTableData.courses[weekIndex][
              parseInt(indexValue) - 1
            ].list[0] = value;
            // push(value);

            this.falg = !this.falg;
            //用falg刷新视图
          } else {
            //如果list存在了，则直接添加数据
            this.classTableData.courses[weekIndex][
              parseInt(indexValue) - 1
            ].list.push(value);
            this.falg = !this.falg;
            //用falg刷新视图
          }
        });
        //二维数组中，一个对象的数据格式
        // cols: "2",
        // list: [
        //   // {
        //   //   name: "计算机组件与维修",
        //   //   time: "周一第1,2节课{第1-15周}",
        //   //   whatWeek: "单周",
        //   //   teacher: "王文安",
        //   //   adress: "北-瓯4-317"
        //   // },
        //   // {
        //   //   name: "计算机组件与维修",
        //   //   time: "周一第1,2节课{第2-12周}",
        //   //   whatWeek: "双周",
        //   //   teacher: "王文安",
        //   //   adress: "北-瓯4-317"
        //   // },
        //   // {
        //   //   name: "计算机组件与维修",
        //   //   time: "周一第1,2节课{第16-17周}",
        //   //   whatWeek: "",
        //   //   teacher: "王文安",
        //   //   adress: "北-瓯4-317"
        //   // }
        // ]
        // console.log(this.classTableData.courses);
        // this.classTableData.courses=this.classTableData.courses
        // console.log("week=>" + weekIndex);
        // console.log(indexList);
      });
    },
    async getNowDate() {
      let res = await this.$http.get("teacherPageAPI/nowXnAndXq");
      console.log(res.data);
      this.scYear.value = res.data.xn;
      this.semester.value = res.data.xq;
      let yearSplitList = this.scYear.value.split("-");
      for (let i = 0; i < 4; i++) {
        let xn = yearSplitList[0] - i + "-" + (yearSplitList[1] - i);
        this.scYear.list.push({
          label: xn,
          value: xn
        });
      }
      this.semester.list = [
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        }
      ];
      this.getSchedule();
    },
    async getSchedule() {
      let res = await this.$http.get(
        `teacherPageAPI/schedule?xn=${this.scYear.value}&xq=${this.semester.value}`
      );
      // console.log(res.data);
      let courseList = res.data;
      if (!courseList.length) {
        this.classTableData.courses = [
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
          [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        ];
        return;
      }
      this.classTableData.courses = [
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
      ];
      let showCourseList = this.courseListMap(courseList);
      this.courseToCourseShow(showCourseList);
      // console.log(showCourseList);
    }
  },
  created() {
    this.getNowDate();
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.schedule-table table {
  width: 100%;
}

.schedule-table thead {
  background: #409eff;
}

.schedule-table thead th {
  width: 12.5%;
  box-sizing: border-box;
  height: 50px;
  color: #f2f6fc;
}

.schedule-table tbody {
  background: #f2f6fc;
}
.schedule-table tbody td {
  width: 12.5%;
  text-align: center;
  box-sizing: border-box;
  padding: 20px 30px;
  height: 100px;
}
.schedule-tabel-item {
  margin-bottom: 10px;
}
.schedule-table .header-picker {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  align-items: flex-end;
}
.el-select-dropdown__item {
  text-align: center;
}
</style>
